<template>
  <t-form
    ref="formRef"
    :data="assessInterviewDetail"
    :requiredMark="false"
    labelAlign="top"
    @submit="onSubmit"
  >
    <div
      class="upload-container"
      :class="isDetail ? 'upload-con2' : 'upload-con1'"
    >
      <!-- 左侧菜单 -->
      <t-menu
        class="upload-container__menu"
        theme="light"
        :expanded="expandedKeys"
        @expand="handleExpand"
        @change="handleMenuChange"
        v-model:value="defaultValue"
      >
        <t-submenu
          mode="popup"
          v-for="item in assessInterviewDetail"
          :key="item.id"
          :value="item.id"
        >
          <template #title>
            <span>{{ item.name }}</span>
          </template>
          <t-menu-item
            v-for="child in item?.child"
            :key="child.id"
            :value="child.code"
          >
            {{ child.name }}</t-menu-item
          >
        </t-submenu>
      </t-menu>
      <t-divider class="upload-container__line" layout="vertical" />
     <!-- 右侧内容 -->
      <div
        class="upload-container__up"
        ref="scrollContainer"
        @scroll.passive="handleScroll"
      >
        <div v-for="(item, gIndex) in assessInterviewDetail" :key="item.code">
          <div class="title" :id="item.child[0].code">
            {{ item.name }}
          </div>
          <div
            v-for="(child, pIndex) in item.child"
            :id="child.code"
            :key="item.code"
          >
            <div class="sub-title">{{ child.name }}</div>
            <div
              v-for="(grandson, cIndex) in child.child"
              :key="item.code"
              class="form-container"
            >
            <div
              v-for="(greatGS, tIndex) in grandson.child"
              :key="item.code"
              class="form-container"
            >
            <div class="txt-name">
                {{ greatGS.name }}
                <t-popup :content="greatGS.ms"
                  ><icon style="cursor: pointer" name="info-circle"
                /></t-popup>
              </div>
             <div class="txt-label">评估得分</div>
              <t-radio-group v-model="greatGS.score" disabled>
                <t-radio value="1.0">100%</t-radio>
                <t-radio value="0.7">70%</t-radio>
                <t-radio value="0.5">50%</t-radio>
                <t-radio value="0.0">0%</t-radio>
              </t-radio-group>
              <div   v-if="greatGS.score != 0" class="txt-label">证据文件</div>
                <t-upload
                ref="uploadRef"
                disabled
                v-if="greatGS.score != 0"
                class="up-container"
                v-model="greatGS.optionsFileList"
                theme="file-flow"
                multiple
                name="files"
                :headers="{ authorization: token }"
                :action="url"
                placeholder="支持批量上传文件，文件格式不限，最多只能上传 5 份文件"
                :abridge-name="[6, 6]"
                :auto-upload="autoUpload"
                :max="5"
                :sizeLimit="{ size: 10, unit: 'MB', message: '文件大小不能超过10MB' }"
                @fail="handleFail"
                @remove="handleRemove"
                :onValidate="handleValidate"
              >
                <template  #fileListDisplay="{ files, dragEvents }">
                    <div class="custom-upload-display">
                      <div class="upload-table">
                        <div class="upload-table-header">
                          <div style="width: 34%">文件名</div>
                          <div style="width: 23%">大小</div>
                          <div style="width: 23%">状态</div>
                          <div style="width: 20%">操作</div>
                        </div>
                        <div class="upload-table-body">
                          <!-- {{files}} -->
                          <div v-for="(file, index) in files" :key="index" class="upload-table-row">
                            <div class="table-cell" style="width: 34%">
                              <span class="file-name table-txt">{{ file.name }}</span>
                            </div>
                            <div class=" table-txt" style="width: 23%">{{ formatFileSize(file.size) }}</div>
                            <div class=" table-txt txt-center" style="width: 23%">
                              <img class="table-success" src="@/assets/image/success.png" alt="">
                              <span class="table-txt" style="margin-left: 8px;">上传成功</span>
                            </div>
                            <div  style="width: 20%">
                              <t-button style=" padding: 0;" variant="text" size="small" theme="primary" @click="handlePreview(file)" :disabled="getFileType(file.name) === 'unknown'">
                                预览
                              </t-button>
                               <t-button style="margin-left: 10px; padding: 0;" variant="text" size="small" theme="primary" @click="downloadFile(file.sjhgPath)">
                                下载
                              </t-button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                </template>
              </t-upload>
              <div class="txt-label">访谈结论</div>
              <t-textarea
                    v-model="greatGS.ftjl"
                    disabled
                    placeholder="请输入内容"
                    :autosize="{ minRows: 2}"
                  />
            </div>
          </div>
          </div>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="fixed-container" >
        <span></span>
        <t-space :size="8" class="fixed-container__btn">
          <t-form-item>
            <t-space :size="8">
              <t-button theme="default" variant="outline"  disabled
                >取消</t-button
              >
              <t-button theme="default" variant="outline"  disabled
                >保存</t-button
              >
              <t-button theme="primary"  disabled>提交</t-button>
            </t-space>
          </t-form-item>
        </t-space>
      </div>
    </div>
  </t-form>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, reactive } from "vue";
import { Icon } from "tdesign-icons-vue-next";
import { getAssessInterviewDetail } from "@/api/sjhg/assess";
import { MessagePlugin } from "tdesign-vue-next";
// import { useRouter } from "vue-router";
import { downloadFile2 } from '@/api/sjhg/upload'; 
// const router = useRouter();
const props = defineProps({
  assessId: {
    type: String,
    default: "",
  }
});
//评估详情
const assessInterviewDetail = reactive([]);

//--------------锚点----------------
const scrollContainer = ref(null);
let observer = null;
const defaultValue = ref(null); //默认选中menu
const formRef = ref(null);

// const popupVisible = ref(false);
// //关闭或展示popup
// const onToggle = () => {
//   popupVisible.value = !popupVisible.value;
// };
const expandedKeys = ref([])

  // 菜单展开/收起回调
const handleExpand = (keys) => {
  console.log('当前展开的菜单:', keys);
  expandedKeys.value = keys;
};
const uploadRef = ref(null);

// 文件列表处理
const handleOptionFileList = (files) => {
  var newFiles = []
  files.forEach(item => {
    if (item.raw) {
      newFiles.push(...item.response.data)
    } else {
      newFiles.push(item)
    }
  });
  return newFiles
}

// 菜单点击处理
const handleMenuChange = (val) => {
  const target = document.getElementById(val);
  if (target) {
    target.scrollIntoView({ behavior: "smooth", block: "start" });
  }
};
// // 菜单点击处理
// const handleMenuChange2 = (val) => {
//   const target = document.getElementById(val);
//   if (target) {
//     target.scrollIntoView({ behavior: "smooth", block: "start" });
//   }
//   onToggle();
// };


//----------------------------锚点处理逻辑--------------------------------------
onBeforeUnmount(() => {
  if (observer) observer.disconnect();
});
onMounted(async() => {
  await getInterviewDetail();
  initIntersectionObserver();
});
// 初始化观察器‌:ml-citation{ref="3,6" data="citationList"}
const initIntersectionObserver = () => {
  const options = {
    root: scrollContainer.value, // 观察元素的根元素，null表示视窗
    threshold: 0.5, // 交叉比例的阈值，0.5表示元素一半进入视窗时触发回调
    rootMargin: "0px", // 根元素的边界
  };

  observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        //元素进入视框
        defaultValue.value = entry.target.id;
      }
    });
  }, options);

  assessInterviewDetail.forEach((item) => {
    item.child.forEach((child) => {
      const el = document.getElementById(child.code);
      if (el) observer.observe(el);
    });
  });
};

//-------------------------访谈评估接口--------------------------------------
const getInterviewDetail = () => {
  let params = {};
  params.assessId = props.assessId;
  getAssessInterviewDetail(params)
    .then((res) => {
      if (res.code == 200) {
        // reactive 赋值方式
        Object.assign(assessInterviewDetail, res.data);
        defaultValue.value = res.data[0].child[0].code;
        expandedKeys.value = assessInterviewDetail.map(item => item.id);
      }
    })
    .finally(() => {});
};

// ------------------- 下载 ---------------------
const downloadFile = async (objectPath) => {
  try {
    // const response = await axios.get('/sjhg/minio/download', {
    //   params: { bucketName: bucket, objectPath },
    //   responseType: 'blob'
    // });

    var params = {}
    params.objectPath = objectPath
    const response = await downloadFile2(params);

    // 生成临时下载链接
    const url = window.URL.createObjectURL(new Blob([response]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', objectPath.split('/').pop() || 'file');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载失败:', error);
  }
};


//----------------------------文件预览------------------------------------
// 在 script setup 中添加以下方法
const formatFileSize = (size) => {
  if (!size) return '0 B';
  if (size < 1024) return `${size} B`;
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
  return `${(size / (1024 * 1024)).toFixed(2)} MB`;
};

function getFileType(filename) {
  const extension = filename.split('.').pop().toLowerCase();
  switch (extension) {
    case 'doc':
    case 'docx':
      return 'word';
    case 'xls':
    case 'xlsx':
    // case 'csv':
      return 'excel';
    case 'pdf':
      return 'pdf';
    case 'jpg':
    case 'jpeg':
    case 'png':
      return 'image';
    default:
      return 'unknown';
  }
}

const handlePreview = (file) => {
  // 实现预览逻辑
  if (file.url) {
    // 如果是图片，可以使用图片预览组件
    if (file.type?.includes('image')) {
      // 使用 TDesign 的图片预览
      window.open(file.url, '_blank');
    } else {
      // 其他文件类型直接在新窗口打开
      window.open(file.url, '_blank');
    }
  } else {
    MessagePlugin.warning('该文件暂不支持预览');
  }
};
</script>

<style lang="scss" scoped>
.t-button--variant-base.t-button--theme-primary.t-is-disabled {
    border-color: var(--td-brand-color-disabled) !important;
    background-color: var(--td-brand-color-disabled) !important;
}
.fsy-container {
  display: flex;
  align-items: center;
  align-self: stretch;
  border-radius: 2px;
  padding: 5px 12px;
  background: #f2f3f5;
  color: #86909c;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin: 8px 0;
  white-space: pre-wrap;
  word-wrap: break-word;    /* 旧版浏览器兼容 */
  overflow-wrap: break-word; /* 更标准的写法 */
  word-break: break-all; 
}
:deep(.t-upload__flow-placeholder ){
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: 400;
  color: #00000066 !important;
  font-size: 12px !important;
}
:deep(.t-upload__flow-empty ){
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: 400;
  color: #00000066 !important;
  font-size: 12px !important;
}
.file-validate {
  color: #d54941;
  font-size: 12px;
  font-weight: 400;
}
.form-container {
  :deep(.t-form__label) {
    color: #4e5969;
    font-size: 14px;
    font-weight: 400;
  }
}
.content-wrapper {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

.anchor-section {
  min-height: 600px;
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #eee;
}
.assessment-result {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 64, 80, 0.08);
  padding: 16px;
  color: var(--light-text-color-text-2, #4e5969);
  font-size: 14px;
  font-weight: 400;
  font-family: PingFang SC-Bold, PingFang SC;
  line-height: 22px; /* 157.143% */
  &__desc {
    margin-top: 12px;
  }
  span {
    margin-left: 16px;
  }
}
.assessment-ok {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
  padding: 16px;
  color: var(--light-text-color-text-2, #4e5969);
  font-size: 14px;
  font-weight: 400;
  font-family: PingFang SC-Bold, PingFang SC;
  line-height: 22px; /* 157.143% */
  &__desc {
    margin-left: 16px;
  }
}
// :deep(.t-anchor .t-is-active > a){
//   color: #0052D9;
// }
// :deep(.t-anchor__line){
//   background-color: #fff;
// }
// :deep(.t-anchor__item) {
//     --level: 0;
//     height: 28px;
// }
.anchor-container {
  min-width: 280px;
  max-height: 500px; /* 根据需求调整高度 */
  overflow-y: auto;  /* 启用垂直滚动 */
  overflow-x: hidden;
  padding: 0 8px;
  position: relative;

  :deep(.t-menu__content) {
      font-family: PingFang SC-Bold, PingFang SC;
      font-size: 14px;
      font-weight: 400;
      margin-left: 8px;
  }
    
  :deep(.t-default-menu .t-menu__item) {
    padding: 0;
    color: #000000E5;
    font-weight: 500;
  }
  :deep(.t-menu__item.t-is-active) {
    width: 280px;
    color: var(--td-brand-color);
    background-color: var(--td-brand-color-light);
  }
  &__img {
    width: 12px;
    height: 12px;
    position: absolute;
    right: 8px;
  }
  :deep(.t-default-menu__inner .t-menu) {
    padding: 0;
  }
  :deep(.t-menu) {
    width: 280px;
    margin-left: -8px;
  }
  &__name {
    height: 28px;
    line-height: 28px;
    margin-top: 3px;
    font-weight: 400;
    font-size: 14px;
    color: #00000042;
  }
}
.popup {
  padding: 6px;
}
.title-container {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e7e7e7;
  padding: 3px 8px;
  &__title {
    height: 28px;
    font-size: 16px;
    line-height: 28px;
    color: #000000e5;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 500;
  }
}
.fixed-container {
  height: 72px;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 196px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background: #fff;
  box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .checkbox {
    margin-left: 270px;
  }
  &__btn {
    margin-right: 20px;
  }
  .tx-txt {
    display: flex;
    justify-content: flex-end;
  }
  .tx-con {
    color: #00000073;
    font-family: PingFang SC-Bold, PingFang SC;
    font-size: 16px;
    font-weight: 400;
  }
  .img {
    margin-right: 5px;
  }
}
:deep(.t-upload__flow-empty) {
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}
:deep(.el-input__wrapper) {
  background-color: #f2f3f5 !important;
  box-shadow: none;
  height: 32px;
}
:deep(.el-input__inner) {
  min-width: 40vw;
  height: 32px;
  line-height: 32px;
  color: #86909c;
}
.up-red{
  :deep(.t-upload__flow-table > thead > tr > th){
    border: none;
  }
  :deep(.t-upload__flow-table ){
    margin-top: 16px;
    border: 1px dashed #d54941;
  }
  :deep(.t-upload__flow-table > thead > tr){
    border-top: 1px dashed #d54941;
  }
  :deep(.t-button--variant-text.t-button--theme-primary ){
    color: #d54941;
  }
  :deep(.t-upload__flow-table > tbody > tr > td){
    color: #d54941;
  }
  :deep(.t-upload__flow-table > tbody > tr ){
    border-top: 1px dashed #d54941;
  }
  :deep(.t-link--theme-default ){
    color:#d54941;
  }
}
.up-container {
  margin-top: 8px;
  margin-bottom: 20px;
  :deep(.t-upload__flow-table > thead > tr > th){
    border: none;
  }
}
.title {
  color: #292b33;
  font-size: 18px;
  line-height: 24px;
  margin-top: 16px;
  letter-spacing: 0.5px;
  font-weight: 500;
  font-family: PingFang SC-Bold, PingFang SC;
}
.sub-title {
  font-size: 16px;
  color: #565960;
  position: relative;
  padding-left: 8px;
  margin-top: 24px;
  font-weight: 500;
  font-family: PingFang SC-Bold, PingFang SC;

  &::before {
    content: ""; /* 在内容前添加竖线 */
    position: absolute;
    width: 3px;
    height: 18px;
    border-radius: 3px;
    background-color: #1966ff;
    left: 0;
    top: 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
}
.txt-name {
  color: #565960;
  font-size: 14px;
  line-height: 22px;
  margin-top: 16px;
  font-weight: 500;
  font-family: PingFang SC-Bold, PingFang SC;
}
.txt-label {
  color: #4e5969;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin-top: 8px;
  margin-bottom: 4px;
  font-family: PingFang SC-Bold, PingFang SC;
}
.reason-input {
  margin: 8px 0;
  :deep(.t-textarea__inner ){
    background-color: #f2f3f5;
    border: 1px solid #f2f3f5;
    border-radius: 2px;
  }
  :deep(.t-textarea__inner:focus){
    box-shadow: none;
  }
}
.validate-input {
  border: 1px solid #d54941;
  border-radius: 4px;
}
.upload-con1 {
  margin-bottom: 60px;
  height: calc(100vh - 288px);
}
.upload-con2 {
  margin-bottom: 0px;
  height: calc(100vh - 230px);
}
.upload-container {
  position: relative;
  display: flex;
  &__menu {
    position: sticky;
    top: 0;
    margin-top: -16px;

    :deep(.t-menu__content) {
      font-family: PingFang SC-Bold, PingFang SC;
      font-size: 14px;
      font-weight: 400;
      span{
        font-weight: 600;
        color: #292B33;
      }
    }
    :deep(.t-default-menu__inner .t-menu) {
      padding: 0;
      margin-top: 8px;
    }
    :deep(.t-default-menu .t-menu__item.t-is-active:not(.t-is-opened)) {
      color: #1966ff;
    }
    :deep(.t-divider--vertical) {
      margin: 0;
    }
    :deep(.t-default-menu__inner .t-menu--scroll) {
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  }
  &__line {
    height: calc(100% + 20px);
    width: 2px;
    margin-top: -16px;
  }
  &__up {
    margin: 0 16px;
    flex-grow: 1; /* 让内容区域填充剩余空间 */
    overflow-y: auto; /* 内容区域允许垂直滚动 */
    margin-top: -16px;

    :deep(.t-is-error .t-input__extra) {
      z-index: 99;
    }
    :depp(.t-upload__tips) {
      display: inline;
    }
  }
  &__up::-webkit-scrollbar {
    display: none;
  }

  //隐藏滚动条
  &__up {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  &__menu::-webkit-scrollbar {
    display: none;
  }
  &__menu {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

.file-container {
  margin: 8px 0;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  &__name {
    font-size: 12px;
    color: #00000066;
    margin-right: 8px;
    font-weight: 400;
    font-family: PingFang SC-Bold, PingFang SC;
  }
}

.custom-upload-display {
  margin-top: 16px;
  max-width: 45vw;
}

.upload-table {
  width: 100%;
  // border: 1px solid #e7e7e7;
  border-radius: 4px;
  overflow: hidden;
}

.upload-table-header {
  display: flex;
  // background-color: #f5f5f5;
  height: 46px;
  padding: 0 16px;
  line-height: 46px;
  color: #00000066;
  font-size: 14px;
  // border-bottom: 1px solid #e7e7e7;
}

// .header-cell {
  // padding: 0 8px;
// }

.upload-table-body {
  background-color: #fff;
  border: 1px dashed #e7e7e7;
}

.upload-table-row {
  display: flex;
   height: 46px;
  line-height: 46px;
    padding: 0 16px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.upload-table-row:last-child {
  border-bottom: none;
}

.table-cell {
  display: flex;
  align-items: center;
}
.table-txt {
  color: #000000E5;
  font-size: 14px;
}
.table-success {
  width: 16px;
  height: 16px;
}
.txt-center{
  display: flex;
  align-items: center;
}

.file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-button {
  height: auto;
}
</style>
